import styled from '@emotion/styled';
import { Button, Divider, Input, Modal, Row } from 'antd';
import React, { useState } from 'react';
import useSyncState from '../hooks/useSyncState';
import { useTranslation } from 'react-i18next';

const VariablePreview = (props: any) => {
	const { t } = useTranslation();
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [detail, setDetail] = useSyncState<{ id: number; variableName: string; variableDesc: string; value: string | number }[]>([
		{
			id: 1,
			variableName: 'age',
			variableDesc: '年龄',
			value: 19
		},
		{
			id: 2,
			variableName: 'name',
			variableDesc: '姓名',
			value: '张三'
		},
		{
			id: 3,
			variableName: 'gender',
			variableDesc: '性别',
			value: '男'
		}
	]);

	const showModal = () => {
		setIsModalOpen(true);
	};

	const handleOk = () => {
		setIsModalOpen(false);
	};

	const handleCancel = () => {
		setIsModalOpen(false);
	};

	const PreviewContainer = styled.div`
		padding: 10px;
		height: 400px;
		background: #f9f9f9;
		overflow-y: auto;
		overflow-x: hidden;
	`;

	const Container = styled.div`
		width: 100%;
	`;

	const DetailItem = styled.div`
		width: 100%;
		padding: 10px 0;
	`;

	const DetailDivider = styled(Divider)`
		margin: 14px 0;
	`;

	const DetailValue = styled(Input)`
		background: none !important;
	`;

	return (
		<div className="variable-preview">
			<Modal
				title={t('confirm-variable-collection-result')}
				open={isModalOpen}
				onOk={handleOk}
				onCancel={handleCancel}
				width="367px"
				footer={<Button type="primary">{t('confirm')}</Button>}
				okText={t('confirm')}
				cancelText={false}
			>
				<p className="label">
					{t('client')}: {props.userName}
				</p>
				<PreviewContainer>
					<Row>
						{detail().map((item, index) => (
							<Container key={item.id}>
								<DetailItem>{item.variableDesc}</DetailItem>
								<DetailValue disabled />
								{index !== detail().length - 1 ? <DetailDivider></DetailDivider> : null}
							</Container>
						))}
					</Row>
				</PreviewContainer>
			</Modal>
		</div>
	);
};

export default VariablePreview;
